<template>
  <div class="d-flex flex-row flex-wrap">
    <div
      class="d-flex flex-row align-center my-10 my-md-5 flex-wrap col-12 pa-0"
      v-for="(item, index) in selectArr"
      :key="index"
    >
      <div class="d-flex col-12 col-md-2 pa-0 justify-center justify-md-start">
        <v-avatar size="80" color="primary"></v-avatar>
      </div>

      <div
        class="d-flex flex-column col-12 col-md-5 pa-0 justify-center justify-md-start align-center align-md-start my-5"
      >
        <div class="d-flex align-center">
          <span>{{ item.mainTitie }}</span
          ><v-chip x-small color="primary" class="text-caption px-2 py-0 ml-2"
            >推荐</v-chip
          >
        </div>
        <span
          class="text-caption my-1 w-100 text-center text-md-left"
        >
          {{ item.subtitie }}
        </span>
        <div>
          <v-btn
            small
            v-for="(btn, index) in item.selectBtns"
            :key="index"
            color="primary"
            class="mr-2"
            >{{ btn.text }}</v-btn
          >
        </div>
      </div>
      <div
        class="d-flex text-h3 font-weight-bold primary--text col-12 col-md-2 pa-0 justify-center"
      >
        ￥{{ item.price }}
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      selectArr: [
        {
          avatar: "",
          mainTitie: "精准预约",
          subtitie:
            "对症疾病:肾积水，尿道损伤，肾发育等等等等等等等等等等等等等等等等等等等等等等等等",
          selectBtns: [
            {
              text: "面诊预约",
              toPath: "",
            },
            {
              text: "图文问诊",
              toPath: "",
            },
          ],
          price: 100,
        },
        {
          avatar: "",
          mainTitie: "私人医生",
          subtitie: "对症疾病:肾积水，尿道损伤，肾发育等等等等",
          selectBtns: [
            {
              text: "在线咨询",
              toPath: "",
            },
            {
              text: "电话直拨",
              toPath: "",
            },
          ],
          price: 300,
        },
      ],
    };
  },
};
</script>



<style lang="scss" scoped>
</style>
